<template>
  <div class="article_writer">
<!-- 标题 -->
    <div class="item">
      <h3>简介标题</h3>
      <Input v-model="title" style="width: 300px" placeholder="输入文章名称"/>
    </div>
    <!--详情介绍-->
    <div>
      <h3 style="text-align: left">简介详情</h3>
      <Editor id="tinymce" v-model="text" :init="init"></Editor>
      <br> <br>
      <Button v-on:click="submission">提交</Button>
    </div>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import  'tinymce/icons/default/icons'
export default {
  name: 'adminIndexChange',
  components: {
    Editor
  },
  data() {
    return {
      text: '',
      title: '',
      //初始化配置
      init: {
        selector: 'textarea',  // change this value according to your HTML
        plugin: 'a_tinymce_plugin',
        a_plugin_option: true,
        skin_url: "/skins/ui/oxide", // skin路径
        height: 300,//编辑器高度
        branding: false,//是否禁用“Powered by TinyMCE”
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    info(text) {
      this.$Notice.info({
        title: '提示',
        desc: text
      });
    },
    //文章提交方法
    submission() {
      let data = {
        title: this.title,
        text:this.text,
      }
      this.$api.post('admin/changeIndex',{article:data}).then((res) => {
        //写数据
        this.info(res.message)
      })
    }
  },
}
</script>
<style>
h3{
  color: rgb(255,255,255);
}
.article_writer {
  padding: 40px 10vw 40px 10vw;
  text-align: left;
}

.article_writer .item {
  padding-bottom: 20px;
}

.article h2 {
  padding: 20px;
}

</style>